<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人中心 - 二手电子产品</title>
  <style>

  </style>
  <link rel="stylesheet" href="css/css.css">
</head>
<body>

<div class="container">

  <div class="profile-header">
    <div class="avatar">
      <img src="https://ts2.tc.mm.bing.net/th/id/OIP-C.WXtLvr1iXhwS6T1mtv9TDgHaHa?r=0&rs=1&pid=ImgDetMain&o=7&rm=3" alt="用户头像">
    </div>
    <div class="user-info">
      <h2>二手达人</h2>
      <p>ID: 88888888</p >
    </div>
  </div>

  <!-- 选项卡导航 -->
  <div class="tabs">
    <div class="tab active" data-tab="profile">个人主页</div>
    <div class="tab" data-tab="orders">我的订单</div>
    <div class="tab" data-tab="sell">我要出售</div>
    <div class="tab" data-tab="collect">我的收藏</div>
    <div class="tab" data-tab="settings">设置</div>
  </div>

  <!-- 选项卡内容 -->
  <div class="tab-content">
    <!-- 个人主页 -->
    <div class="content active" id="profile">
      <div class="item">
        <p><strong>昵称：</strong>二手达人</p >
        <p><strong>简介：</strong>专注于高性价比的二手电子产品交易。</p >
      </div>
    </div>

    <!-- 我的订单 -->
    <div class="content" id="orders">
      <div class="item">
        <p><strong>订单号：</strong>2023052012345</p >
        <p><strong>商品：</strong>Apple iPhone 13</p >
        <p><strong>状态：</strong>已完成</p >
      </div>
      <div class="item">
        <p><strong>订单号：</strong>2023061898765</p >
        <p><strong>商品：</strong>AirPods Pro</p >
        <p><strong>状态：</strong>待收货</p >
      </div>
    </div>

    <!-- 我要出售 -->
    <div class="content" id="sell">
      <div class="item">
        <p>欢迎发布您的闲置电子产品！</p >
        <p><button style="margin-top:10px;">发布新商品</button></p >
      </div>

      <!-- 已上架商品展示 -->
      <h3>已上架商品</h3>
      <div class="product-list">
        <div class="product-item">
          <img src="https://ts2.tc.mm.bing.net/th/id/OIP-C.axNFCGBRxbgIMjI0YtGLMQHaHa?r=0&rs=1&pid=ImgDetMain&o=7&rm=3" alt="iPhone 13">
          <div class="product-info">
            <p class="product-title">iPhone 13 128G 蓝色</p >
            <p class="product-price">¥4,299</p >
            <p class="product-status">在售</p >
          </div>
        </div>
        <div class="product-item">
          <img src="https://2c.zol-img.com.cn/product/222_800x600/518/ceK0Leg1T3No.jpg" alt="MacBook Pro">
          <div class="product-info">
            <p class="product-title">MacBook Pro 13寸 M1</p >
            <p class="product-price">¥7,500</p >
            <p class="product-status">已售</p >
          </div>
        </div>
        <div class="product-item">
          <img src="https://zhongces3.sina.com.cn/product/20220910/165ea605ad52f3b3c3011c6bab001718.jpeg" alt="AirPods">
          <div class="product-info">
            <p class="product-title">AirPods Pro 二代</p >
            <p class="product-price">¥1,399</p >
            <p class="product-status">在售</p >
          </div>
        </div>
      </div>
    </div>


    <div class="content" id="collect">
      <div class="item">
        <p><strong>收藏商品：</strong>Sony WH-1000XM4</p >
      </div>
      <div class="item">
        <p><strong>收藏商品：</strong>Nintendo Switch</p >
      </div>
    </div>


    <div class="content" id="settings">
      <div class="item">
        <p><strong>账户安全</strong></p >
        <p><strong>消息通知</strong></p >
        <p><strong>关于我们</strong></p >
      </div>
    </div>
  </div>
</div>

<script>
  const tabs = document.querySelectorAll('.tab');
  const contents = document.querySelectorAll('.content');

  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      tabs.forEach(t => t.classList.remove('active'));
      tab.classList.add('active');

      const tabId = tab.getAttribute('data-tab');
      contents.forEach(content => {
        content.classList.remove('active');
      });
      document.getElementById(tabId).classList.add('active');
    });
  });
</script>

</body>
</html>
